<?php slot('sub', $sub); ?>
<?php slot('menu', $menu); ?>
<?php slot('user', $user); ?>

<link type="text/css" rel="stylesheet" href="/web/css/agent_page.css" />
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA4ORL54bd4TqneYqWekkc22xhZ1T3gH6A&sensor=false"></script>

<div class="agent_center">
    <div class="agent_page_container">
        <div class="header_agent_block"><span>Agents Around</span></div>

        <div class="agetns_sort_block">
            <div class="sort_by_location">
                <input type="radio" name="agent_sort" value="1"><label>My current location ~100 km</label>
            </div>
            <div class="sort_by_city">
                <input type="radio" name="agent_sort" value="2"><label>Search in</label>
                <select class="agents_country">
                    <option value="0">Country</option>
                    <?php
                    foreach ($selectCountry as $cc) {
                        if ($search['country'] == $cc->getId()) {
                            echo '<option value="' . $cc->getId() . '" selected="selected">' . $cc->getNameEn() . '</option>';
                        } else {
                            echo '<option value="' . $cc->getId() . '">' . $cc->getNameEn() . '</option>';
                        }
                    }
                    ?>
                </select>
                <select class="agents_region"></select>
                <select class="agents_city"></select>
                <input type="button" value="Search" id="search_agents_by_city">
            </div>
        </div>

        <div class="agents_block">
            <div class="agents_div_around_container">
                <?php
                foreach ($arrAgents as $a) {
                    echo '<div class="agent_info" agent_id="' . $a['id'] . '" latitude="' . $a['latitude'] . '" longitude="' . $a['logitude'] . '">
                    <ul class="lidac_inner">
                        <li class="lida_name">' . $a['title'] . '</li>
                        <li class="lida_ratio" value="' . $a['reputation'] . '">' . $a['reputation'] . '</li>
                        <li class="lida_separ">|</li>
                        <li class="lida_users">' . $a['orders'] . '</li>
                    </ul>
                </div>';
                }
                ?>
            </div>
            <div id="agents_map"></div>
            <div class="agents_div_region_container">
                <div class="agents_div_region_title"><span>Agents in Region</span></div>
                <?php
                foreach ($arrRegion as $a) {
                    echo '<div class="agent_info" agent_id="' . $a->getId() . '">
                    <ul class="lidac_inner">
                        <li class="lida_name">' . $a->getTitle() . '</li>
                        <li class="lida_ratio" value="' . $a->getReputation() . '">' . $a->getReputation() . '</li>
                        <li class="lida_separ">|</li>
                        <li class="lida_users">' . $a->getOrders() . '</li>
                    </ul>
                </div>';
                }
                ?>
            </div>
            <div class="agents_div_country_container">
                <div class="agents_div_region_title"><span>Agents in Country</span></div>
                <?php
                foreach ($arrCountry as $a) {
                    echo '<div class="agent_info" agent_id="' . $a->getId() . '">
                    <ul class="lidac_inner">
                        <li class="lida_name">' . $a->getTitle() . '</li>
                        <li class="lida_ratio" value="' . $a->getReputation() . '">' . $a->getReputation() . '</li>
                        <li class="lida_separ">|</li>
                        <li class="lida_users">' . $a->getOrders() . '</li>
                    </ul>
                </div>';
                }
                ?>
            </div>
        </div>
    </div>
</div>

<!--<div class="agent_info" agent_id="2">
    <ul class="lidac_inner">
        <li class="lida_name">Fortuna</li>
        <li class="lida_ratio" value="5">5</li>
        <li class="lida_separ">|</li>
        <li class="lida_users" value="120">120</li>
    </ul>
</div>-->

<script>
    var agents = [];
    var agentLat = '<?php echo $myLatitude; ?>';
    var agentLog = '<?php echo $myLongitude; ?>';
    var regions = [];
    var cites = [];
    var search = {
        data: '<?php echo $search['data'] ?>',
        country: '<?php echo $search['country'] ?>',
        region: '<?php echo $search['region'] ?>',
        city: '<?php echo $search['city'] ?>'
    };

<?php foreach ($selectRegion as $r) { ?>
        var temp = {
            id: '<?php echo $r->getId() ?>',
            nameEn: '<?php echo $r->getNameEn() ?>',
            countryId: '<?php echo $r->getCountryId() ?>'
        };

        regions.push(temp);
<?php } ?>

<?php foreach ($selectCity as $c) { ?>
        var temp = {
            id: '<?php echo $c->getId() ?>',
            nameEn: '<?php echo $c->getNameEn() ?>',
            country_id: '<?php echo $c->getCountryId() ?>',
            region_id: '<?php echo $c->getRegionId() ?>'
        };

        cites.push(temp);
<?php } ?>

    $(function() {
        setTimeout(createHotelMap, 200);

        if (search.data) {
            $('input:radio[name="agent_sort"]').filter('[value="1"]').prop('checked', false);
            $('input:radio[name="agent_sort"]').filter('[value="2"]').prop('checked', true);
        } else {
            $('input:radio[name="agent_sort"]').filter('[value="1"]').prop('checked', true);
            $('input:radio[name="agent_sort"]').filter('[value="2"]').prop('checked', false);
        }

        $('.agent_info').each(function(i, v) {
            var ratio = $(v).find('li.lida_ratio').attr('value');
            if (parseFloat(ratio) >= 4) {
                $(v).find('li.lida_ratio').css({'color': '#19a44b'});
            } else if (parseFloat(ratio) < 4 && parseFloat(ratio) >= 2.5) {
                $(v).find('li.lida_ratio').css({'color': '#ffc000'});
            } else {
                $(v).find('li.lida_ratio').css({'color': '#b02358'});
            }

            $(v).find('li.lida_ratio').attr({'title': 'reputation ' + ratio + '/5'});
            $(v).find('li.lida_users').attr({'title': 'agent orders'}).css({'color': '#20aedc'});

            $(v).click(function() {
                window.location.assign(urlBackend + 'agentpage/agent/' + $(v).attr('agent_id'));
            });

            if ($(v).attr('latitude') && $(v).attr('longitude')) {
                var temp = {
                    title: $(v).find('li.lida_name').html(),
                    latitude: $(v).attr('latitude'),
                    longitude: $(v).attr('longitude')
                };

                agents.push(temp);
            }
        });

        if ($('input[name=agent_sort]:checked').val() == 1) {
            $('.agents_country').prop('disabled', true);
            $('.agents_region').prop('disabled', true);
            $('.agents_city').prop('disabled', true);
        }

        $('input[name=agent_sort]').change(function() {
            if ($('input[name=agent_sort]:checked').val() == 1) {
                $('.agents_country').prop('disabled', true);
                $('.agents_region').prop('disabled', true);
                $('.agents_city').prop('disabled', true);
            } else {
                $('.agents_country').prop('disabled', false);
                $('.agents_region').prop('disabled', false);
                $('.agents_city').prop('disabled', false);
            }
        });

        $('#search_agents_by_city').click(function() {
            if ($('input[name=agent_sort]:checked').val() == 2) {
                var country = $('.agents_country').val();
                var region = $('.agents_region').val();
                var city = $('.agents_city').val();
                if (country == 0 && region == 0 && city == 0) {
                    return false;
                } else {
                    window.location.assign(urlBackend + 'agents/lt/' + agentLat + '/ln/' + agentLog + '/sort/2/country/' + country + '/region/' + region + '/city/' + city);
                }
            } else {
                window.location.assign(urlBackend + 'agents/lt/' + agentLat + '/ln/' + agentLog);
            }
        });

        var countryId = search.country;
        var regionsId = search.region;
        insertRegions(countryId);
        insertCity(countryId, regionsId);

        $('.agents_country').change(function() {
            countryId = $(this).val();
            insertRegions(countryId);
            insertCity(countryId, regionsId);
        });

        $('.agents_region').change(function() {
            regionsId = $(this).val();
            insertCity(countryId, regionsId);
        });
    });

    function createHotelMap() {

        var position;
//        if (agentLat && agentLog) {
//            position = [agents[0].latitude, agents[0].longitude];
//        } else {
//            position = [29.5513522, 34.9643545];
//        }

        if (agents.length > 0) {
            position = [agents[0].latitude, agents[0].longitude];
        } else {
            position = ['<?php echo $maps['latitude'] ?>', '<?php echo $maps['longitude'] ?>'];
        }

        var location = new google.maps.LatLng(position[0], position[1]);

        var mapOptions = {
            center: location,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("agents_map"), mapOptions);

        $.each(agents, function(i, v) {
            var markerPosition = new google.maps.LatLng(v.latitude, v.longitude);
            setTimeout(function() {
                var marker = new google.maps.Marker({
                    position: markerPosition,
                    map: map,
                    title: v.title
                });
            }, i * 100);
        });
    }

    function insertCity(country_id, region_id) {
        $('.agents_city option').remove();
        var parentSelect = $('.agents_city');
        var firstOption = '<option value="0">Select city</option>';
        (parentSelect).append(firstOption);

        $.each(cites, function(i, v) {
            if (country_id !== 0 && region_id !== 0) {
                if (v.country_id === country_id && v.region_id === region_id) {
                    if (search.city == v.id) {
                        (parentSelect).append('<option value="' + v.id + '" selected="selected">' + v.nameEn + '</option>');
                    } else {
                        (parentSelect).append('<option value="' + v.id + '">' + v.nameEn + '</option>');
                    }
                }
            }
        });
    }

    function insertRegions(country_id) {
        $('.agents_region option').remove();
        var parentSelect = $('.agents_region');
        var firstOption = $('<option value="0">Select region</option>');
        (parentSelect).append(firstOption);

        $.each(regions, function(i, v) {
            if (country_id === 0) {
                (parentSelect).append('<option value="' + v.id + '">' + v.nameEn + '</option>');
            } else if (country_id !== 0 && country_id === v.countryId) {
                if (search.region == v.id) {
                    (parentSelect).append('<option value="' + v.id + '" selected="selected">' + v.nameEn + '</option>');
                } else {
                    (parentSelect).append('<option value="' + v.id + '">' + v.nameEn + '</option>');
                }
            }
        });
    }
</script>